<template>
    <div class="forget">
        <van-nav-bar
                :fixed="TopShow"
                title="立即注册"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <div :style="{marginTop: '86px'}">
            <div style="width: 48px;height: 48px;margin: 0 auto">
                <img src="../../static/login.png"
                     style="height: 48px;width: 48px"
                />
            </div>
            <h3 class="header_tit_txt" >注册账号</h3>
            {{user_id}}
            <van-cell-group>
                <van-field
                        v-model="UserMobile"
                        label="手机号:"
                        placeholder="请输入手机号"
                />
                <van-field
                        v-model="Name"
                        label="昵  称:"
                        placeholder="请输入昵称"
                />
                <van-radio-group v-model="radio" class="radio">
                    <span :style="{padding:'2px 4px'}">性  别：</span>
                    <van-radio name="1" :style="{paddingLeft:'4px'}">男</van-radio>
                    <van-radio name="2" :style="{paddingLeft:'6px'}">女</van-radio>
                    <van-radio name="0" :style="{paddingLeft:'6px'}">保密</van-radio>
                </van-radio-group>
                <!--error-message="手机号格式错误"-->
                <van-field
                        v-model="password"
                        label="登录密码:"
                        type="password"
                        placeholder="请输入登录密码"
                />
                <van-field
                        v-model="paypassword"
                        label="支付密码:"
                        type="password"
                        placeholder="请输入6位数字支付密码"
                />
                <!--<van-field-->
                        <!--v-model="code"-->
                        <!--center-->
                        <!--clearable-->
                        <!--label="验证码:"-->
                        <!--placeholder="请输入短信验证码">-->
                    <!--<van-button slot="button" size="small" type="primary" @click="UserCode" v-show="CodeShow">-->
                        <!--发送验证码-->
                    <!--</van-button>-->
                    <!--<van-button disabled type="primary" slot="button" size="small" v-show="!CodeShow">重新发送({{date}})S</van-button>-->
                <!--</van-field>-->
            </van-cell-group>
            <div :style="{padding:'2px',marginTop:'10px'}">
                <van-button size="large" @click="setData">立即注册</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {VerificationCode,UserInvitation} from '../api/data'
    import Vue from 'vue'
    import { Toast } from 'vant';
    Vue.use(Toast);
    export default {
        data(){
            return{
                radio:'1',
                timer:null,
                date:'',
                user_id:'',
                TopShow:true,
                CodeShow:true,
                UserMobile:'',
                Name:'',
                password:'',
                paypassword:'',
                // code:'',
            }
        },
        methods:{
            onClickLeft(){
                this.$router.push({path:`/login`})
            },
            //验证用户输入的合法性
            setData(){
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                let UserMobile = this.UserMobile;
                let name = this.name;
                let password = this.password;
                let paypassword = this.paypassword
                let code = this.code;
                if (reg.test(UserMobile)) {
                    if (name ==''){
                        Toast('昵称不能为空！')
                        return
                    }
                    if (paypassword.length<6){
                        Toast('支付密码不能低于6位！')
                    }
                    if (password.length<6) {
                        Toast('密码不能小于6位！')
                        return;
                    }
                    // if(code.length<6){
                    //     Toast('请输入正确的验证码！')
                    //     return
                    // }
                    UserInvitation(this.user_id,this.radio,this.UserMobile,this.Name,this.password,this.paypassword).then(res=>{
                        console.log(res.data)
                        if (res.data.msg == '验证码已经过期,请先获取验证码!') {
                            Toast('验证码已经过期,请先获取验证码!')
                            return
                        }
                        if(res.data.msg == '验证码不正确!'){
                            Toast('验证码不正确!')
                            return
                        }
                        if (res.data.msg == '邀请成功！') {
                            Toast('注册并激活成功,请登录!')
                            this.$router.push({path:`/login`})
                        }
                        if (res.data.msg == '手机已经注册过！') {
                            Toast('此账号已存在!请登录！')
                            this.$router.push({path:`/login`})
                        }
                    })
                } else {
                    Toast('请输入正确的手机号！')
                }
            },
            UserCode(){
                let username = this.UserMobile
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                if (reg.test(username)){
                    VerificationCode(username).then(res=>{
                        console.log(res.data)
                        if (res.data.msg =='验证码发送过多,请明天再试!') {
                            Toast('验证码发送过多,请明天再试!')
                            return
                        }
                        this.CodeShow=false
                        const TIME_COUNT = 60;
                        if (!this.timer) {
                            this.date = TIME_COUNT;
                            this.timer = setInterval(() => {
                                if (this.date > 0 && this.date <= TIME_COUNT) {
                                    this.date--;
                                } else {
                                    this.CodeShow=true
                                    this.show = true;
                                    clearInterval(this.timer);
                                    this.timer = null;
                                }
                            }, 1000)
                        }
                        Toast('验证码发送成功，有效期30分钟！')
                    })
                }else{
                    Toast('请输入正确的手机号！')
                }
            }
        },
        mounted(){
            this.user_id = this.$route.query.user_id
        }
    }
</script>

<style scoped>
    .header_tit_txt{
        text-align: center;
        padding: 20px 0px;
    }
    .model{
        width: 49px;
        height: 48px;
        margin: 0 auto;
        display: block;
    }
    .radio{
        font-size: 14px;
        padding: 10px;
        width: 100%;
        height: 50px;
        display: flex;
    }
</style>
